<section class="content-section-column ui-tree-select-container">
  <lv-tree-select
    [lvTreeData]="treeData"
    lvTreeShowCheckbox
    lvBlockNode
    [lvTreeNodeTemplate]="nodeTpl"
    [lvTreeBeforeSelected]="beforeSelected"
    [(ngModel)]="selection"
    (ngModelChange)="onChange($event)"
  >
    <!-- 自定义展示区 -->
    <lv-treeselect-trigger>
      <div lv-overflow>
        CustomLabel：
        <span>{{ selection?.length ? selection[0].label : '' }}</span>
      </div>
    </lv-treeselect-trigger>
    <!-- 自定义头部 -->
    <lv-treeselect-header class="ui-custom-container">Custom head</lv-treeselect-header>

    <!-- 自定义底部 -->
    <lv-treeselect-footer class="ui-custom-container">Custom footer</lv-treeselect-footer>
  </lv-tree-select>

  <p>Selection: {{ selection?.length ? selection[0].label : 'none' }}</p>
</section>

<!-- treeNode自定义模板 -->
<ng-template #nodeTpl let-item>
  <div class="ui-tree-node-item" (mouseover)="item.showOperation = true" (mouseleave)="item.showOperation = false">
    <span lv-overflow>{{ item.label }}</span>
    <lv-group lvGutter="8px" *ngIf="item.showOperation">
      <i lv-icon="icon-delete" lvColorState (click)="delete($event)"></i>
      <i lv-icon="icon-copy" lvColorState (click)="copy($event)"></i>
    </lv-group>
  </div>
</ng-template>
